<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="form.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号">
              <el-input v-model="form.mobile" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="df_center">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <div class="export">
                <a type="primary" @click="handleExport" id="toExcel" class="box">导出</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div class="listDiv" v-loading="tableLoading">
      <el-table ref="tableData" id="datas" :data="tableData" style="width: 100%">
        <el-table-column label="姓名" prop="username" align="center" />
        <el-table-column label="手机号" prop="name" align="center">
          <!-- <template slot-scope="scope">
            <span>{{scope.row.name | phonereg}}</span>
          </template>-->
        </el-table-column>
        <el-table-column
          label="身份证号"
          prop="idcard"
          align="center"
          width="200px"
          style="vnd.ms-excel.numberformat:@"
        />
        <el-table-column label="转出银行卡" prop="card_num" align="center" width="200px" class="card" />
        <el-table-column label="提现金额" prop="amount" align="center" />
        <el-table-column label="审核单" prop="users_amount_trans_id" align="center">
          <template slot-scope="scope">{{scope.row.users_amount_trans_id | checkType}}</template>
        </el-table-column>
        <el-table-column label="是否排队" prop="isqueue" align="center">
          <template slot-scope="scope">{{scope.row.isqueue | queueType}}</template>
        </el-table-column>
        <el-table-column label="当前排名" prop="lineup_hover" align="center" />
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="handleApproval(scope.row.name,scope.row.user_id)"
              v-if="scope.row.users_amount_trans_id <1"
            >生成审批单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { yueList } from "@/api/yueLineUp";
import axios from "axios";
import serv from "@/utils/request1";
export default {
  data() {
    return {
      http: serv.defaults.baseURLApp1,
      form: {
        name: "",
        mobile: "",
      },
      tableData: [],
      tableLoading: true,
    };
  },
  filters: {
    queueType(opt) {
      //0 已取消 1排队中
      switch (opt) {
        case 0:
          return "已取消";
          break;
        case 1:
          return "排队中";
          break;
        default:
          break;
      }
    },
    checkType(opt) {
      return (opt = parseInt(opt) > 0 ? "是" : "否");
    },
  },
  mounted() {
    this.getList(this.form);
  },

  methods: {
    // 生成审批单
    handleApproval(mobile, user_id) {
      let data = {
        mobile,
        user_id,
      };
      axios
        .get("https://app.yuepinyuemei.com/addamounttrans", { params: data })
        .then((res) => {
          console.log("res", res);
          if (res.data.status_code == 0) {
            this.$message({
              type: "success",
              message: "已生成审批单",
            });
            this.getList(this.form);
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
    },
    // http://test.api2.yuepinyuemei.com/seelineup 测试https://app.yuepinyuemei.com/
    getList(opt) {
      // console.log("opt", opt);
      axios
        // .get(process.env.BASE_API3 + "seelineup", {
        .get("https://app.yuepinyuemei.com/seelineup", {
          params: opt,
        })
        .then((res) => {
          this.tableLoading = false;
          if (res.data.status_code == 0) {
            this.tableData = res.data.data;
          } else {
            this.$message({
              type: "info",
              message: res.data.message,
            });
          }
        });
    },
    // 查询
    handleSearch() {
      this.getList(this.form);
    },
    // 导出
    handleExport(event) {
      document.getElementById("toExcel");
      var html =
        "<html><head><meta charset='UTF-8'></head><body>" +
        document.getElementById("datas").outerHTML +
        "</body></html>";
      // 创建一个Blob对象，第一个参数是文件的数据，第二个参数是文件类型属性对象
      var blob = new Blob([html], { type: "application/vnd.ms-excel" });
      var a = event.target;
      // 利用URL的createObjectURL方法为元素a生成blobURL
      a.href = URL.createObjectURL(blob);
      // 设置文件名
      a.download = "余额提现排队";
    },
  },
};
</script>
<style  scoped>
.export /deep/ a {
  display: inline-block;
  width: 70px;
  height: 36px;
  text-align: center;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  margin-left: 20px;
  box-sizing: border-box;
}
.df_center {
  display: flex;
  align-items: center;
}
</style>